<template>
  <div style="padding:15px">
    <div class="four-header">
      个人信息
    </div>
    <div class="four-main">
      <div class="four-main-item"><span>姓名:&emsp;</span>{{userForm.userName}}
        <!-- 是否游客的判断 -->
        <img v-if="userForm.identity===1" src="@/assets/image/myself/u83.png" style="width:60px; height:20px; vertical-align: top; margin-left:30px;">
        <img v-else  src="@/assets/image/myself/u90.png" style="width:60px; height:35px; vertical-align: top; margin-left:30px; ">
      </div>
      <!-- 用户昵称板块 -->
      <div class="four-main-item">
        <span>用户昵称:&emsp;</span>
        <template v-if="flag1==='1'">
          {{userForm.nickName}}
          <button class="four-main-item-btn" @click="flag1='0'" ><i class="el-icon-edit-outline"></i></button>
        </template>
        <template v-else>
          <input placeholder="请输入新的用户昵称" v-model="userForm.nickName" size="small"
            style="width:10em; height:22px;line-height:22px; font-size:14px;" @blur="checkUserid">
        </template>
      </div>
      <!-- 用户性别模块 -->
      <div class="four-main-item"><span>性别:&emsp;</span>
        <template v-if="flag2==='1'">
          {{userForm.sex}}
          <button class="four-main-item-btn" @click="flag2='0'"><i class="el-icon-edit-outline"></i></button>
        </template>
        <template v-else>
          <el-radio label="男" v-model="userForm.sex">男</el-radio>
          <el-radio label="女" v-model="userForm.sex">女</el-radio>
        </template>
      </div>
      <!-- 用户手机号模块 -->
      <div class="four-main-item"><span>手机号码:&emsp;</span>
        <template v-if="flag3==='1'">
          {{userForm.mobile}}
          <button class="four-main-item-btn" @click="flag3='0'"><i class="el-icon-edit-outline"></i></button>
        </template>
        <template v-else>
          <input placeholder="请输入新的手机号码" v-model="userForm.mobile" size="small"
            style="width:10em;height:22px;line-height:22px; font-size:14px;" @blur="checkUserid">
        </template>
      </div>
      <!-- 用户邮箱模块 -->
      <div class="four-main-item"><span>邮箱:&emsp;</span>
        <template v-if="flag4==='1'">
          {{userForm.email}}
          <button class="four-main-item-btn" @click="flag4='0'"><i class="el-icon-edit-outline"></i></button>
        </template>
        <template v-else>
          <input placeholder="请输入新的邮箱号" v-model="userForm.email" size="small"
            style="width:10em;height:22px;line-height:22px; font-size:14px;" @blur="checkUserid">
        </template>
      </div>
      <!-- 用户出生年月模块 -->
      <div class="four-main-item"><span>出生年月:&emsp;</span>
        <template v-if="flag5==='1'">
          {{userForm.birthday.year}}年{{userForm.birthday.month}}月
          <button class="four-main-item-btn" @click="flag5='0'"><i class="el-icon-edit-outline"></i></button>
        </template>
        <template v-else>
          <el-select v-model="userForm.birthday.year" filterable size="small" style="width: 90px">
            <el-option v-for="item in years" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select> <span>年</span>
          <el-select v-model="userForm.birthday.month" filterable size="small" style="width: 90px; margin-left:10px;">
            <el-option v-for="item in months" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select> <span>月</span>
        </template>
      </div>
      <!-- 用户部门模块 -->
      <div class="four-main-item"><span>隶属部门:&emsp;</span>{{userForm.sector}}</div>
      <!-- 表单提交按钮显示区域 -->
      <template v-if="flag1==='0'|flag2==='0'|flag3==='0'|flag4==='0'|flag5==='0'|flag6==='0'">
        <div class="four-main-item" style="margin-top:70px">
          <button class="mypageFour-submit" @click="mypageFoursubmit">提交</button>
          <button class="mypageFour-quit"  @click="mypageFourquit">取消</button>
        </div>
      </template>
    </div>
  </div>

</template>

<script>
import {getMyselfData,postMyselfData} from "@/api/myself/myself";
  export default {
    data() {
      return {
        userForm: {
          userName: '张三',
          identity: 1,
          nickName: '小明同学',
          sex: '男',
          mobile: '123-xxx-xxxx',
          email: '12345678@163.com',
          birthday: {
            year: '1990',
            month: '10'
          },
          sector: 'xxx项目组',
        },
        // 公共数据
        userId:this.$store.getters.userId,
        //存储下拉选项数组
        years: '',   
        months: '',
        sectors :['业务部一','业务部二','业务部三','业务部四','业务部五','xxx项目组'],
        //每个表单切换按钮标记，别问为啥不用数组，试过了切换不了
        flag1: '1',
        flag2: '1',
        flag3: '1',
        flag4: '1',
        flag5: '1',
        flag6: '1' 
      }
    },
    methods: {
      // 做修改时用个本地存储取消修改的数据
       change() {
            // localStorage.setItem('obj', JSON.stringify(this.userForm));
       },
      // 后面还要添加个输入身份信息校验函数
      checkUserid() {
        console.log(this.userForm.nickName);
      },
      // 提交按钮弹出框
      openAlert(str) {
        this.$alert(str, '', {
          confirmButtonText: '确定',
          customClass:"checkMessageBox",
          callback: action => {
            this.$message({
              type: 'success',
              message: `修改身份信息成功`
            });
          }
        });
      },
      // 提交按钮后修改身份信息
      mypageFoursubmit() {
        // 跳出修改成功弹出框
        this.openAlert('您的身份信息修改成功');
        //  发送请求失败的的话   this.openAlert('您的身份信息修改失败');
        // 设置重新点击事件真值
        this.flag1 = '1';
        this.flag2 = '1';
        this.flag3 = '1';
        this.flag4 = '1';
        this.flag5 = '1';
        this.flag6 = '1';
        // 还需要添加提交用户信息给数据库方法
        // 数据对接处理 
        let formData = {
              userId: this.userId,
              password: this.userForm.email,
              phonenumber: this.userForm.mobile,
              userName: this.userForm.userName,
              deptName: this.userForm.sector,
              email: this.userForm.email,
              nickName: this.userForm.nickName,
              sex: this.userForm.sex,
              birthday:this.userForm.birthday.year+'-'+this.userForm.birthday.month,
            }
         let data = JSON.stringify(formData);     
         postMyselfData(data)
        .then((res)=>{
           console.log(res);
        }).catch((err)=>{

        })
      },
      // 退出按钮后取消修改
      mypageFourquit() {  
        this.flag1 = '1';
        this.flag2 = '1';
        this.flag3 = '1';
        this.flag4 = '1';
        this.flag5 = '1';
        this.flag6 = '1';
        // let Item = JSON.parse(localStorage.getItem('obj'))
        // this.userForm = Item;
      },
      // 动态获取年份数组
      initSelectYear(year) {
        this.years = [];
        this.months = [];
        for (let i = 0; i < 50; i++) {
          this.years.push({
            value: year - i,
            label: year - i 
          });
        }
        // 月份
       for (let i =1; i<=12; i++) {
         this.months.push({
            value: i,
            label: i 
          });
       }
      },
    },
    created() {
        // 捕获本年度的时间
      var myDate = new Date();
      var year = myDate.getFullYear(); //获取当前年
      this.initSelectYear(year);
      // 获取个人信息数据
      let data= {userId: this.userId}
      getMyselfData(data)
      .then((res)=>{
         console.log(res);
          this.userForm.userName = res.data.userName;
          this.userForm.nickName = res.data.nickName;
          this.userForm.sex = res.data.sex;
          this.userForm.mobile = res.data.phonenumber;
          this.userForm.email = res.data.email;
          this.userForm.sector = res.data.deptName;
          this.userForm.birthday.year=res.data.birthday.split('-')[0];
          this.userForm.birthday.month=res.data.birthday.split('-')[1];
      }).catch((err)=>{
            console.log(err);
      })

    },
  }
</script>

<style scoped>
  .four-header {
    margin-top: 50px;
    margin-left: 50px;
    width: 100px;
    font-size: larger;
    font-weight: bolder;
  }

  .four-main {
    height: 300px;
    width: 400px;
    margin-left: 100px;
  }

  .four-main-item {
    text-align: left;
    height: 20px;
    width: 400px;
    margin-top: 20px;
  }

  .four-main-item-btn {
    border-style: none;
    background-color: white;
    ;
    height: 20px;
    size: small;
    font-size: medium;
    float: right;
    vertical-align: top;
  }

  .four-main-item-btn:hover {
    color: rgb(64, 158, 255);
  }

  .el-icon-edit-outline {
    font-size: 20px;
  }

  .mypageFour-submit {
    height: 25px;
    width: 60px;
    float: left;
    margin-left: 30px;
    background-color: rgb(0, 178, 129);
    border-style: none;
    font-weight: bold;
    color: aliceblue;
    border-radius: 5px;
  }

  .mypageFour-quit {
    height: 25px;
    width: 60px;
    float: right;
    margin-right: 30px;
    background-color: rgb(22, 155, 213);
    border-style: none;
    font-weight: bold;
    color: aliceblue;
    border-radius: 5px;
  }
</style>
<style>
  .checkMessageBox {
    height:200px;
    width: 280px
  }
  .checkMessageBox .el-message-box__message p {
    margin: 0;
    text-align: center;
    line-height: 24px;
}
 .checkMessageBox .el-message-box__btns {
    padding: 5px 15px 0;
    text-align: center;
    margin-top: 50px;
}
</style>